<template>
	<div class="content" @touchmove.prevent>
		<div class="wait" v-if="showWaiting">
			<img class="wait-mouse" src="http://h5static.weiyoho.com/assets/theme/mouse.png" />
			<div class="tip">客官稍等，马上就好</div>
			<!-- <img class="wait-text" src="http://h5static.weiyoho.com/assets/share/text.png" /> -->
		</div>
		<div v-if="downloadUrl" class="share">
			<img width="100%" height="100%" :src="downloadUrl" fit="scale-down" />
			<!-- <div v-if="show" class="finger">
				<van-image class="finger-img" width="80" :src="finger" fit="scale-down"></van-image>
			</div>
			<div v-if="show" class="close" @click="showFinger(false)">
				<van-image width="20" height="20" :src="close" fit="scale-down"></van-image>
			</div> -->
			<div class="share-wrap" v-if="pageid == 1">
				<div class="picture-save-button">
					<img width="110" :src="picture_save" height="30" fit="scale-down" />
				</div>
				<!-- <div class="picture-share-button">
					<img @click="showMask(true)" width="110" height="30" :src="picture_share" fit="scale-down" />
				</div> -->
			</div>
			<div class="share-wrap" v-if="pageid == 2">
				<div class="calendar-save-button">
					<img width="130" height="30" :src="calendar_save" fit="scale-down" />
				</div>
				<!-- <div class="calendar-share-button">
					<img @click="showMask(true)" width="110" height="30" :src="calendar_share" fit="scale-down" />
				</div> -->
			</div>
			<div class="share-wrap" v-if="pageid == 3">
				<div class="paper-save-button">
					<img width="110" height="30" :src="paper_save" fit="scale-down" />
				</div>
				<!-- <div class="paper-share-button">
					<img @click="showMask(true)" width="110" height="30" :src="paper_share" fit="scale-down" />
				</div> -->
			</div>
			<div v-if="show_mask" @click="showMask(false)" class="share-mask"></div>
			<van-image v-if="show_mask" width="60%" class="share-guide" :src="share" fit="scale-down"></van-image>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		Image as VantImage,
		NavBar,
		Tab,
		Tabs,
		Button,
		List,
		Cell
	} from "vant";
	export default {
		name: "share",
		components: {
			[VantImage.name]: VantImage,
			[NavBar.name]: NavBar
		},
		data() {
			return {
				// load: 0,
				show: false,
				show_mask: false,
				showWaiting: this.$store.state.showWaiting,
				// show_wait: this.globalShowLoading,
				pageid: null,
				downloadUrl: '',
				finger: 'http://h5static.weiyoho.com/assets/share/finger.png',
				picture_save: require('../assets/share/picture-save.png'),
				picture_share: require('../assets/share/picture-share.png'),
				calendar_save: require('../assets/share/calendar-save.png'),
				calendar_share: require('../assets/share/calendar-share.png'),
				paper_save: require('../assets/share/paper-save.png'),
				paper_share: require('../assets/share/paper-share.png'),
				close: 'http://h5static.weiyoho.com/assets/share/close.png',
				share: 'http://h5static.weiyoho.com/assets/share/share.png'
			};
		},
		// computed: {
		// 	...mapState({
		// 		showWaiting: state => showWaiting,
		// 	})
		// },
		methods: {
			/**this.$route.params
			 * @desc 跳转页面
			 */
			onClickLeft() {
				this.$router.back(-2);
			},
			showFinger(flag) {
				this.show = flag
			},
			showMask(flag) {
				this.show_mask = flag
			},
			preload() {
				let image = new Image()
				image.src = this.downloadUrl
				image.onload = () => {
					this.show_wait = false
					// this.count++
					// 计算图片加载的百分数，绑定到percent变量
					// let percentNum = Math.floor((this.count / imgs.length) * 100)
					// this.percent = `${percentNum}`
				}
			},
		},
		created() {
			this.pageid = this.$route.query.id
			this.downloadUrl = this.$route.query.downloadImg
			console.log("created:")
			// console.log("this.globalShowLoading:", this.globalShowLoading)
			// console.log("this.showWaiting:", this.showWaiting)
			// this.load = this.$route.query.load  //0:不需要预加载图片，1:需要（别人从分享页进来）
		},
		mounted() {
			let that = this
			console.log("mounted:")
			console.log("this.showWaiting:", this.$store.state.showWaiting)
			this.$store.state.showWaiting && this.preload()
			// let url = '/share?id=1&downloadImg=' + response.data.url
			// setTimeout(function () {
			// 	wx.ready(function () {
			// 		wx.showOptionMenu();
			// 		//“分享到朋友圈”
			// 		wx.onMenuShareTimeline({
			// 			title: '祝福千千万 鼠你不一样',
			// 			link: `http://h5shu.weiyoho.com/h5shu/#share?id=${that.pageid}&downloadImg=${that.downloadUrl}`,
			// 			imgUrl: 'http://h5static.weiyoho.com/assets/theme/mouse.png',
			// 			success: function () {
			// 				console.log("分享成功");
			// 			},
			// 			cancel: function () {
			// 				console.log("分享失败");
			// 			}
			// 		});
			// 		// “分享给朋友”
			// 		wx.onMenuShareAppMessage({
			// 			title: '祝福千千万 鼠你不一样',
			// 			desc: '立即定制，专“鼠”于你的新春祝福！',
			// 			link: `http://h5shu.weiyoho.com/h5shu/#share?id=${that.pageid}&downloadImg=${that.downloadUrl}`,
			// 			imgUrl: 'http://h5static.weiyoho.com/assets/theme/mouse.png',
			// 			type: 'link', // 分享类型，当前是链接link
			// 			success: function () {
			// 				console.log("分享成功")
			// 			},
			// 			cancel: function () {
			// 				console.log("分享失败")
			// 			}
			// 		});
			// 	});
			// }, 500)
		},
	}
</script>

<style lang="less">
	.content {
		.share {
			position: absolute;
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: hidden;
		}

		.wait {
			width: 100vw;
			height: 100vh;
			background: url(../assets/theme/bg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;

			.tip {
				position: absolute;
				top: 300px;
				font-size: 22px;
				color: #fff;
			}

			&-mouse {
				position: absolute;
				top: 150px;
				width: 100px;
				-webkit-animation: mouse-down-up-ani 2s ease-in-out infinite;
			}

			&-text {
				position: absolute;
				top: 300px;
				width: 200px;
			}
		}
	}

	.share-wrap {
		display: flex;
		width: 100vw;
		justify-content: center;
	}

	.picture-share-button {
		position: absolute;
		right: 40px;
		bottom: 2vh;
		z-index: 9;
	}

	.picture-save-button {
		position: absolute;
		// left: 40px;
		bottom: 2vh;
		z-index: 9;
		pointer-events: none;
	}

	.calendar-share-button {
		position: absolute;
		right: 40px;
		bottom: 4vh;
		z-index: 9;
	}

	.calendar-save-button {
		position: absolute;
		// left: 40px;
		bottom: 4vh;
		z-index: 9;
		pointer-events: none;
	}

	.paper-share-button {
		position: absolute;
		right: 40px;
		bottom: 1vh;
		z-index: 9;
	}

	.paper-save-button {
		position: absolute;
		// left: 40px;
		bottom: 1vh;
		z-index: 9;
		pointer-events: none;
	}

	.finger {
		position: relative;
		bottom: 42vh;
		display: flex;
		justify-content: center;
		pointer-events: none;

		&-img {
			-webkit-animation: finger-ani 2s ease-in-out infinite;
		}
	}

	.close {
		position: relative;
		bottom: 58vh;
		left: 40px;
		display: flex;
		justify-content: center;
	}

	.share-mask {
		position: absolute;
		z-index: 9;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		opacity: 0.4;
	}

	.share-guide {
		position: absolute;
		z-index: 9;
		top: 20px;
		right: 20px;
	}

	@keyframes finger-ani {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes mouse-down-up-ani {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(10deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>